디자인설계 (2)

January 08. 2024

UI 디자인 패턴으론 부족하다!

스크린샷 2023-12-26 오후 12.37.04

아토믹 디자인패턴에서 제일 힘든 부분이 기능적인 부분을 구성할 때이다. UI는 재사용성 있게 구성했지만, 정작 클릭이벤트같은 이벤트를 발생시키는 로직을 구성할때 아토믹에서 제공하게된다면 이는 재사용성에 큰 지장을 줄 것이다. 해당 로직이 필요없는 곳에서는 UI는 같지만 기능이 다르므로 사용할 수 없게 된다. 이런 부분을 고려하여 기능적인 부분은 아토믹에서 담당하지않고 커스텀훅으로 제공하도록 하였다.

필터 / 검색기능을 제공하는 커스텀 훅

--custom hook--
	const {
    searchFilterParams,
    valueParam,
    selectTab,
    resetSearcFilterParams,
    setChangeSearchParams,
    onValueParamChange,
    onSelectTab,
    onResetFilter,
    onSearch,
    isParamsLoading,
  } = useSearchFilter<NoticeParamsType>(initData)
  
    useEffect(() => {
    return () => {
      resetSearcFilterParams()
    }
  }, [])
 
------ ui -----
return (
	<FilterItem label="Keyword">
     <div className="grid6">
        <SearchIcoInput
          uiType="addSelect"
          clearValue={() => onValueParamChange('', 'keyword')}
          onSearchClick={() => onSearch('keyword')}
          onSearch={(event) => onSearch(event, 'keyword')}
          value={valueParam || ''}
          onChangeSearch={onValueParamChange}
          placeholder="Enter keyword"
         >
           <SelectMui
            value={selectTab?.keywordTab || ''}
            placeholder="Select"
            size="full"
            onChange={(event) => onSelectTab(event, 'keywordTab')}
            options={optionList}
            uiType="multi"
            />
     	</SearchIcoInput>
     </div>
	 </FilterItem>
       <ButtonMui
		     size="xsmall"
		     type="outlined"
		     color="gray"
		     uiType="reset_btn"
		     icon="ResetIcon"
		     iconStyle={{ width: 20, height: 20, fill: '#354165' }}
		     onClick={() => onResetFilter(initData)}
       />
  --- 생략 ----
)  

위의소스를 보면, useSearchFilter를 커스텀훅으로 제공하고 있습니다. useSearchFilter는 이름 그대로, 검색과 필터에 필요한 기능들을 제공합니다. 예를들어, 검색에서 키탭과 검색기능이 있습니다. 이때 필요한 함수는 무엇일까요? 크게 검색은 두가지 경우로 할 수있습니다. 키워드를 입력 후 엔터를 누르는 경우, 또는 검색아이콘을 클릭한 경우입니다. 두가지의 경우를 고려한 함수인 onSearch함수를 제공하고있습니다. onSearch함수에는 api에서 요구하는 key값을 인자로 보내주기만하면 됩니다. 다른 기능도 살펴볼까요?

OnSelectTab

OnSelectTab기능은 키워드 탭을 선택하게 해주는 기능을 제공해주는 함수입니다. 검색어를 좀 더 세분화하여 검색하고 싶을때 키워드탭을 제공하게되는데, api에서 요구하는 dto만 두번째 인자에 보내주면 params가 구성됩니다. value는 onChange와 바인딩을 위해서 selectTab으로 연결해줍니다.

onResetFilter

리셋버튼을 눌렀을 때 리셋을 해주는 함수입니다. 페이지에 진입할 때 제공하는 초기값 initData를 인자로 넘겨주면 클릭할때 해당 데이터로 복원해줍니다.

이렇게, UI는 아토믹 디자인 패턴으로 제공하고, 기능적인 부분은 커스텀 훅으로 제공하므로서 1대1 관리가 형성됩니다. 예를들어, 기능적인 부분에 이슈가 있거나 수정해야한다면 우리는 커스텀훅만 바라보면 됩니다. UI에 대한 수정이나 이슈가 있다면 필터아이템과 컨텐츠박스만 바라보면 됩니다. 서로 독립적으로 구성이 되어있어 훨씬 더 유지관리가 편해지며 확장성이 좋아집니다. 실제로 이를 제공하여, 프론트 초급개발자 두분이 필터관련 페이지를 개발함에 있어 시간단축에 큰 효과를 보았습니다.

커스텀 훅 패턴을 사용한 이유

커스텀 훅을 굳이 쓰지않고, 해당 페이지에서 기능을 제공하면 되지않을까요?!

이렇게 생각할 수도 있지만, 위의 레이아웃은 여러페이지에서 사용되고있다. 즉, 재사용성이 꼭 필요하다. 재사용성을 고려하지않는다면! 우리는 같인 검색기능로직을 페이지마다 개발해야하는 번거로움이 생길 것이다. 이를 위해서 커스텀 훅을 제공하여 재사용성을 방지하였다.